import {Card, Col, Form, Row} from 'antd';
import HttpRequest from '@/utils/HttpRequest';
import {defaultDomain} from '@/config/domain';


import {PageContainer} from '@ant-design/pro-layout'
import React, {useEffect, useRef, useState} from 'react'
import {Line} from '@ant-design/charts';


const DashBoard  : React.FC = () => {
  const actionRef = useRef< any>()
  const [data, setData] = useState([])
  const [statData, setStatData] = useState([])
  useEffect(  () => {
      asyncFetch()
     asyncStats();
  } ,[ ])

  async function asyncFetch()  {
    ///dashboard/topicCurrent?_=1647847365720
    const res = await HttpRequest({
      baseURL: defaultDomain,
      url: '/dashboard/topicCurrent?' + Math.random(),
      method: 'GET',
      params: {},
    })

    if (res.status == 0) {
      // @ts-ignore
      const data = res.data
      let dataList = []
      for (let i in data) {
        let item = data[i]
        let itemList = item.split(',')
        let v = Number.parseInt(itemList[1])
        if (v > 0) {
          dataList.push({
            value: Number.parseInt(itemList[1]),
            //topic: i+20,
            topic: itemList[0],
            name: itemList[0],
          })
        }
      }
      console.log('data>>', dataList)
      // @ts-ignore
      setData(dataList)
    }
  }

  async function asyncStats() {
    const res = await HttpRequest({
      baseURL: defaultDomain,
      url: '/cluster/list.query',
      method: 'GET',
      params: [],
    })
    console.log('res=', res)
    // @ts-ignore
    const data = res.data
    let brokerList = []
    if(data) {
      let brokerServer = data.brokerServer
      if ( brokerServer) {
        for (let i in brokerServer) {
          let serverList = brokerServer[i]
          for (let s in serverList) {
            let instance = serverList[s]
            let bro = {}
            bro['broker'] = i
            // @ts-ignore
            bro['yesterdayPut'] =
              instance.msgPutTotalTodayMorning -
              instance.msgPutTotalYesterdayMorning
            bro['yesterdayGet'] =
              instance.msgGetTotalTodayMorning -
              instance.msgGetTotalYesterdayMorning

            bro['todayPut'] =
              instance.msgPutTotalTodayNow - instance.msgPutTotalTodayMorning
            bro['todayGet'] =
              instance.msgGetTotalTodayNow - instance.msgGetTotalTodayMorning

            brokerList.push({
              value: Number.parseInt(bro['yesterdayPut']),
              topic: '昨日生产总数',
              category: bro['broker'],
            })

            brokerList.push({
              value: Number.parseInt(bro['yesterdayGet']),
              topic: '昨日消费总数',
              category: bro['broker'],
            })

            brokerList.push({
              value: Number.parseInt(bro['todayPut']),
              topic: '今天生产总数',
              category: bro['broker'],
            })

            brokerList.push({
              value: Number.parseInt(bro['todayGet']),
              topic: '今天消费总数',
              category: bro['broker'],
            })
          }
        }
        // @ts-ignore
        setStatData(brokerList)
      }
    }
  }

  const config: any  = {
    data:data ||[],
    xField: 'topic',
    yField: 'value',
    yAxis: {
      type: 'log',
    },
    xAxis: {
      tickCount: 5,
    },
    smooth: true,
    legend: {
      position: 'top',
    },
  };
  const t_config: any = {
    data:statData || [],
    xField: 'topic',
    yField: 'value',
    seriesField: 'category',
    yAxis: {
      type: 'log',
    },
    xAxis: {
      tickCount: 5,
    },
    smooth: true,
    legend: {
      position: 'top',
    },
  };


  return (
    <PageContainer key="dashboard"  >
      <Form  ref={actionRef}>
      <Row style={{ marginTop: '10px' }}>
        <Col span={12}>
          <Card title="topic消息">
            <Line {...config}  />
          </Card>
        </Col>

        <Col span={12}>
          <Card title="消息统计">
            <Line {...t_config}  />
          </Card>
        </Col>
      </Row>
      </Form>
    </PageContainer>
  )
}

export default DashBoard
